<template>
  <div class="userAdmin">
    <div class="userInfo">
      <div class="info">
        <div class="infoBox">
          <img class="avatar" :src="Page.avatar" alt="avatar" />
          <div class="intro">
            <div class="name">{{ Page.title }}</div>
            <div class="motto">{{ Page.intro }}</div>
          </div>
        </div>
      </div>
      <div class="navsBox"></div>
      <router-view v-slot="{ Component }">
        <!-- name="zoom-fade" -->
        <transition name="fade-slide-y" mode="out-in">
          <keep-alive>
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router"
import { Page } from "@/config/page"
const route = useRoute()
</script>

<style lang="scss" scoped>
.userAdmin {
  width: 100%;
  box-sizing: border-box;
  padding-top: 40px;

  .userInfo {
    width: 100%;
    background: var(--BlockBgColor);
    transition: var(--basic-transition);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
      rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px,
      rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding: 15px;
    border-radius: 20px 20px 0 0;
    position: relative;
    z-index: 11;
    box-sizing: border-box;
    animation: userInfoIn 1s var(--n-bezier) forwards;

    .info {
      display: flex;
      align-items: center;
      .infoBox {
        flex: 1;
        display: flex;
        align-items: center;
        .avatar {
          display: block;
          width: 70px;
          height: 70px;
          border-radius: 15px;
          box-shadow: 0 2px 4px -2px rgb(0 0 0 / 50%);
          user-select: none;
        }
        .intro {
          color: var(--TextColor);
          margin-left: 20px;
          transition: var(--basic-transition);
          user-select: none;
          .name {
            font-size: 20px;
            font-weight: bold;
            color: var(--navsColor);
            margin-bottom: 5px;
            transition: var(--basic-transition);
          }
          .motto {
            color: var(--navsColor);
            transition: var(--basic-transition);
          }
        }
      }
    }
    .navsBox {
      width: 100%;
      margin-top: 20px;
      overflow-x: auto;
      border-bottom: 2px solid var(--borderColor);
      transition: border-color 0.3s var(--n-bezier);
      box-sizing: border-box;
      padding-bottom: 10px;
    }
  }
}
@media (max-width: 768px) {
  .banner {
    height: 300px !important;
    .img {
      height: 300px !important;
    }
    .title {
      line-height: 300px !important;
      font-size: 30px !important;
    }
  }
  .navs {
    padding: 15px 0;
    .item {
      padding: 0 10px;
      font-size: 16px !important;
    }
  }
}
</style>
